<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程旅行</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 在PC端上，1px对应1个物理像素 -->
    <!-- 在移动端，1px可能对应2个或者多个物理像素，目的是为了显示的更加清晰 -->
    <!-- 所以会有二倍图，三倍图一说。所以书写的时候，写的PX要比真实的PX要小一倍或者更多 -->
    <!-- 一般图片或者背景图会需要考虑这些事，因为图片被放大会导致失真 -->
    <!-- 意思就是如果是10px的图，并且写的也是10px，那么在移动端会用20px展示10px的图，所以导致图片失真了 -->
    <!-- 而如果本身给的图就是20px，那么在写的是10px时，并且在移动端展示的时候，就是用20px进行展示，也就是刚刚好 -->
    <!-- 搜索区域 -->
    <div class="search">
        <div class="search-input">
            目的地/酒店/航班
        </div>
        <a href="#mine" class="user"></a>
    </div>
    <!-- 广告图 -->
    <div class="focus">
        <img src="https://dimg04.c-ctrip.com/images/0zg341200094jtjq1CDB2.jpg" alt="">
    </div>
    <!-- 导航栏部分 -->
    <ul class="local-nav">
        <li>
            <a href="" title="攻略•景点">
                <span class="local-nav-icon-icon1"></span>
                <span>攻略•景点</span>
            </a>
        </li>
        <li>
            <a href="" title="攻略•景点">
                <span class="local-nav-icon-icon2"></span>
                <span>攻略•景点</span>
            </a>
        </li>
        <li>
            <a href="" title="攻略•景点">
                <span class="local-nav-icon-icon3"></span>
                <span>攻略•景点</span>
            </a>
        </li>
        <li>
            <a href="" title="攻略•景点">
                <span class="local-nav-icon-icon4"></span>
                <span>攻略•景点</span>
            </a>
        </li>
        <li>
            <a href="" title="攻略•景点">
                <span class="local-nav-icon-icon5"></span>
                <span>攻略•景点</span>
            </a>
        </li>
    </ul>
    <!-- 主导航区域 -->
    <div class="nav">
        <div class="nav-row">
            <div class="nav-item">
                <a href="#">酒店</a>
            </div>
            <div class="nav-item">
                <a href="#">海外</a>
                <a href="#">特价</a>
            </div>
            <div class="nav-item">
                <a href="#">团购</a>
                <a href="#">民宿</a>
            </div>
        </div>
        <div class="nav-row">
            <div class="nav-item">
                <a href="#">酒店</a>
            </div>
            <div class="nav-item">
                <a href="#">海外</a>
                <a href="#">特价</a>
            </div>
            <div class="nav-item">
                <a href="#">团购</a>
                <a href="#">民宿</a>
            </div>
        </div>
        <div class="nav-row">
            <div class="nav-item">
                <a href="#">酒店</a>
            </div>
            <div class="nav-item">
                <a href="#">海外</a>
                <a href="#">特价</a>
            </div>
            <div class="nav-item">
                <a href="#">团购</a>
                <a href="#">民宿</a>
            </div>
        </div>
    </div>
    <!-- 块级导航 -->
    <ul class="shortcut-nav">
        <li>
            <a href="#">
                <span class="shortcut-nav-icon"></span>
                <span>自由行</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="shortcut-nav-icon"></span>
                <span>Wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="shortcut-nav-icon"></span>
                <span>外币兑换</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="shortcut-nav-icon"></span>
                <span>购物</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="shortcut-nav-icon"></span>
                <span>当地向导</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="shortcut-nav-icon"></span>
                <span>自由行</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="shortcut-nav-icon"></span>
                <span>自由行</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="shortcut-nav-icon"></span>
                <span>自由行</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="shortcut-nav-icon"></span>
                <span>自由行</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="shortcut-nav-icon"></span>
                <span>自由行</span>
            </a>
        </li>
    </ul>
</body>

</html>